<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--jQuery路径-->
		<script src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript">
			//$(document).ready(function() {
			//alert("Hello World");
			//})
			function doMain() {
				doCheck2();
			}

			function doCheck2() {
				//后代选择器-- 后代选择器包括所有的子元素
				//$("#from1 input").css("background-color","burlywood");
				
				//子选择器-子选择器只包括第一层的子元素
				//$("#from1>input").css("background-color","chartreuse");
				
				//紧邻选择器 --选取紧邻元素1的下一个元素
				//$("#tr1+tr").css("background-color", "coral");
				
				//兄弟选择器--选择所有的位于元素1后面的同级的元素
				//$("#tr1~tr").css("background-color", "coral");
				$("#tr1~tr input").css("background-color", "coral");

			}

			function doTest() {
				//jQuery选择器
				//id选择器
				$("#txtName")[0].value = "小明";
				$("#txtName").css("background-color", "red");
				//标签选择器
				var options = $("option");
				for(var i = 0; i < options.length; i++) {
					console.info(options[i].innerHTML);
				}
			}

			function doCheck() {
				/*
					 jquery常用的选择器
					 一、基本选择器
					 1、id选择器
					 jQuery("#标签id")
					  等价于 document.getElementById()
					 注意：jquery的选择结果是jquery对象
					    dom对象转换为 jquery对象
					    jQuery(dom对象)
					    
					    jquery对象转换为dom对象
					    jQuery(选择器)[序号]或者
					    jQuery(选择器).get(0)
					 2、标签选择器
					   $("标签名")
					   选择的结果是所有的改名的标签对象数组集合
					 3、样式类选择器
					 $(".样式类名")
					 4、*选择器
					 $("*")
					 5、列举选取器（集合选择器） --- 所有满足条件的并集
					 $("选择器1，选择器2，。。。选择器n")
					 
					 二、层次选择器
					 1、后代选择器
					 $('父元素' 后代元素的名称)  
					 后代选择器包括所有的子元素
					 2、子选择器
					 $('父元素' > 后代元素的名称)
					 子选择器只包括第一层的子元素
					 3、紧邻选择器
					 $('元素1' + 紧邻元素的名称)
					 选取紧邻元素1的下一个元素
					 4、兄弟选择器
					 $('元素1' ~ 元素的名称)
					 选择所有的位于元素1后面的同级的元素
					 * */
			}
		</script>

	</head>

	<body>
		<div align="center">
			<form id="from1" method="get">
				<input name="ttt" id="ttt" />
				<table border="1" cellpadding="0" cellspacing="0" bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
					<tbody>
						<tr id="tr1">
							<td>姓名</td>
							<td><input type="text" id="txtName" name="txtName" /></td>
						</tr>
						<tr>
							<td>登录密码</td>
							<td><input type="password" id="txtPsw" name="txtPsw" /></td>
						</tr>
						<tr>
							<td>性别</td>
							<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
							<td><input type="radio" id="radSex" name="radSex" /> 女
								<input type="radio" id="radSex2" name="radSex" />男
								<input type="radio" id="radSex3" name="radSex" />未知</td>
						</tr>

						<tr>
							<td>个人简历</td>
							<td><input type="file" id="fileResume" name="fileResume" /></td>
						</tr>
						<tr>
							<td>兴趣爱好</td>
							<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
							<td><input type="checkbox" id="chHobby1" name="chHobby" />游泳
								<input type="checkbox" id="chHobby2" name="chHobby" />爬山
								<input type="checkbox" id="chHobby3" name="chHobby" />dota
								<input type="checkbox" id="chHobby4" name="chHobby" />coding
								<input type="checkbox" id="chHobby5" name="chHobby" />testing</td>
						</tr>
						<tr>
							<td>隐藏控件</td>
							<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
						</tr>
						<tr>
							<td>学历</td>
							<td>
								<select id="selectXL" name="selectXL" style="width: 120px;">
									<option value=""></option>
									<option value="DZ">大专</option>
									<option value="BK" selected>本科</option>
									<option value="SS">硕士</option>
									<option value="BS">博士</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>自我介绍</td>
							<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td><input type="button" value="提交" id="btnSubmit" onclick="return doMain();" /></td>
							<td><input type="reset" value="重置" id="btnSubmit" /></td>
						</tr>
					</tbody>
				</table>

			</form>
		</div>
	</body>

</html>